// Updated responsive utilities (2024-03-21)
@use "element-plus/theme-chalk/src/common/var.scss" as element;
@use "@/styles/variables" as vars;

// 断点变量
$breakpoints: (
  'sm': vars.$ep-sm,
  'md': vars.$ep-md,
  'lg': vars.$ep-lg,
  'xl': vars.$ep-xl,
  'xxl': vars.$ep-xxl
) !default;

// 响应式混入
@use "sass:math";
@use "sass:map";
@use "sass:string";

@mixin respond-to($breakpoint) {
  @if map.has-key($breakpoints, $breakpoint) {
    @media screen and (max-width: map.get($breakpoints, $breakpoint)) {
      @content;
    }
  } @else {
    @warn "未知的断点: #{$breakpoint}";
  }
}

// 通用响应式类
.container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1rem;

  @include respond-to('lg') {
    max-width: 960px;
  }

  @include respond-to('md') {
    max-width: 720px;
  }

  @include respond-to('sm') {
    max-width: 540px;
  }
}

// 响应式网格系统
.row {
  display: flex;
  flex-wrap: wrap;
  margin: -0.5rem;
}

.col {
  flex: 1;
  padding: 0.5rem;
}

@for $i from 1 through 12 {
  .col-#{$i} {
    flex: 0 0 math.percentage(math.div($i, 12));
    max-width: math.percentage(math.div($i, 12));
  }

  @each $breakpoint, $width in $breakpoints {
    .col-#{$breakpoint}-#{$i} {
      @include respond-to($breakpoint) {
        flex: 0 0 math.percentage(math.div($i, 12));
        max-width: math.percentage(math.div($i, 12));
      }
    }
  }
}

// 响应式工具类
.d-none {
  display: none !important;
}

@each $breakpoint in map.keys($breakpoints) {
  .d-#{$breakpoint}-none {
    @include respond-to($breakpoint) {
      display: none !important;
    }
  }

  .d-#{$breakpoint}-block {
    @include respond-to($breakpoint) {
      display: block !important;
    }
  }

  .d-#{$breakpoint}-flex {
    @include respond-to($breakpoint) {
      display: flex !important;
    }
  }
}

// 响应式间距
$spacers: (
  0: 0,
  1: 0.25rem,
  2: 0.5rem,
  3: 1rem,
  4: 1.5rem,
  5: 3rem
);

@each $prop in (margin, padding) {
  @each $size, $value in $spacers {
    .#{string.slice($prop, 0, 1)}-#{$size} {
      #{$prop}: $value !important;
    }
    .#{string.slice($prop, 0, 1)}t-#{$size} {
      #{$prop}-top: $value !important;
    }
    .#{string.slice($prop, 0, 1)}b-#{$size} {
      #{$prop}-bottom: $value !important;
    }
    .#{string.slice($prop, 0, 1)}l-#{$size} {
      #{$prop}-left: $value !important;
    }
    .#{string.slice($prop, 0, 1)}r-#{$size} {
      #{$prop}-right: $value !important;
    }
    .#{string.slice($prop, 0, 1)}x-#{$size} {
      #{$prop}-left: $value !important;
      #{$prop}-right: $value !important;
    }
    .#{string.slice($prop, 0, 1)}y-#{$size} {
      #{$prop}-top: $value !important;
      #{$prop}-bottom: $value !important;
    }
  }
}

// 响应式文本
.text-center {
  text-align: center !important;
}

@each $breakpoint in map.keys($breakpoints) {
  .text-#{$breakpoint}-left {
    @include respond-to($breakpoint) {
      text-align: left !important;
    }
  }
  .text-#{$breakpoint}-center {
    @include respond-to($breakpoint) {
      text-align: center !important;
    }
  }
  .text-#{$breakpoint}-right {
    @include respond-to($breakpoint) {
      text-align: right !important;
    }
  }
}
